<template>
	<view class="packageCardRecordPage">
		<view class="withdrawalRecordsTop flex">
			<view class="search-content">

				<image class="search-img" src="../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="请输入搜索用户" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>




		</view>
		<view style="padding: 10rpx  30rpx">

			<!-- <view class="flex-between margin-top_20rpx" style="color: rgb(153, 153, 153);">
				<text>累计订单金额：3632413.32</text>
				
				<view class="">
					按时间<uni-icons type="down" size="15"></uni-icons>
				</view>
			</view> -->
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="padding_20rpx">
					<view class="packageCardList">
						<view class="flex-between padding-top_20rpx  padding-bottom_30rpx ">
							<view class="flex">
								<image class="image" :src="item.avatar" mode=""></image>
								<view class="flex-columns-center margin-left_30rpx">
									<text class="font-weight_bold margin-bottom_10rpx"
										style="font-size: 30rpx;">{{item.nickname}}</text>
									<text
									class="margin-bottom_10rpx"
										style="color: rgb(153, 153, 153);;font-size: 24rpx;text-align: left;">手机号:{{item.phone?item.phone:'----'}}
									</text>
									<text
										style="color: rgb(153, 153, 153);;font-size: 24rpx;text-align: left;">{{item.create_time}}
									</text>

								</view>
							</view>

							<view class="flex-column-end margin-left_30rpx  ">
								<text class="font-weight_bold margin-bottom_10rpx"
									style="font-size: 30rpx;color: rgb(255, 0, 0);">{{item.total_commission}}</text>

								<text style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">获得总佣金
								</text>
							</view>

						</view>
						<view class="card">
							<view class="margin-bottom_40rpx flex-between" style="color: rgb(102, 102, 102);">
								<text class="font-weight_bold">当前余额：<text
										style="color: rgb(255, 0, 0);">￥{{item.balance}}</text></text>
								<text class="font-weight_bold" style="color: rgb(0, 124, 255);">扣除TA</text>
							</view>
							<view class="">
								<view class="margin-bottom_20rpx flex-between" style="color: rgb(102, 102, 102);">
									<text>所得积分：{{item.integral}}</text>
									<text>下单总金额：{{item.consumption_amount}} </text>
								</view>
								<view class=" border-bottom-ECECEC flex-between" style="color: rgb(102, 102, 102);">
									<text>套餐卡充值：{{item.package_amount}}</text>
									<text>上级：{{item.p_nickname?item.p_nickname:'平台'}} </text>
									
								</view>
							</view>
						</view>
						<view class="flex-around margin-top_20rpx">
							<view style="color: rgb(255, 0, 0);" class=" flex margin-right_16rpx"
								@click="deleteFn(item)">
								<uni-icons   color="rgb(255, 0, 0)" type="compose" size="18"></uni-icons>
								<!-- <uni-icons color="rgb(255, 0, 0)" type="trash" size="18"></uni-icons> -->
								
								 {{ item.status==0?'启动':'禁用' }}
							</view>
							<view class=" flex margin-right_16rpx" @click="userRecordsFn(item)">
								<image class="icon" src="../../static/会员卡管理端/path (3).png" mode=""></image>
								操作记录
							</view>
							<view class="margin-right_16rpx flex" @click="modifySuperiorFn(item)">
								<uni-icons type="compose" size="18"></uni-icons>
								修改上级
							</view>
							<view style="color: rgb(0, 124, 255);" class=" flex " @click="modifyFn(item)">
								<uni-icons color="rgb(0, 124, 255)" type="compose" size="18"></uni-icons>
								修改资料
							</view>
						</view>
					</view>
				</view>
			</block>
		</mescroll-body>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定删除" content="放弃绑定银行卡表示不可使用银行卡进行支付"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改次数" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="">
					<view class="viewDetailsTop flex-column " v-if="userInfo">
						<view class="flex-column  ">
							<image class="avatar" :src="userInfo.avatar" mode=""></image>
							<view class="padding_20rpx_0 font-weight_bold">
								手机号: {{userInfo.phone?userInfo.phone:'----'}}

							</view>
							<text class="font-weight_bold" style="color: rgb(255, 0, 0);">
								余额:{{userInfo.balance}} |积分:{{userInfo.integral}}|佣金: {{userInfo.total_commission}}


							</text>
				
						</view>

					</view>
					<view class="addEmployee" v-if="modifyStatus==1">
						<uni-forms :rules="rulesWxForm" ref="form" :modelValue="form" label-position="top">

							<uni-forms-item label="扣除余额" name="balance" required labelWidth="180px">
								<uni-easyinput trim="all" v-model="form.balance" placeholder="请输入余额" />

							</uni-forms-item>
							<uni-forms-item label="扣除积分" name="integral" required labelWidth="180px">
								<uni-easyinput type='number' maxlength="11" trim="all" v-model="form.integral"
									placeholder="请输入积分" />

							</uni-forms-item>

							<view class="flex margin-bottom_20rpx">
								<text>是否需要修改用户资料，一旦修改不可恢复</text>
							</view>

							<view class=" flex-around">
								<view class="cancel flex" @click="cancel()">
									取消
								</view>
								<view class="sumbit-btn flex" @click="saveInfo('form')">
									确定
								</view>
							</view>


						</uni-forms>
					</view>
					<view v-else class="edit modifySuperior  ">

						<!-- 	<view class="inputIphone flex-start iphones ">

							<input class="font-overflow" v-model="changeValue" placeholder="请输入上级手机号" />
							<view class="verificationCodes" @click="getVerificationCode()">
								搜索</view>
						</view> -->
		
							<scroll-view v-if="list.length" :scroll-y="true" style="height: 700rpx;">
							<block style="overflow-y: auto; height: 700rpx" v-for="(item,index) in list" :key="index">
								<radio-group @change="e=>radioChange(e,item.id)">
									<view class="flex-around margin-top_20rpx" v-if="item.id!==userInfo.id">
										<image class="image" :src="item.avatar" mode=""></image>
										<view class="flex-columns-center margin-left_30rpx">
											<text class="font-weight_bold margin-bottom_10rpx"
												style="font-size: 30rpx;">{{item.nickname}}</text>
											<!-- 	<text style="color: rgb(153, 153, 153);font-size: 24rpx;margin-bottom: 5rpx;">
												手机号:{{item.phone}}
											</text> -->
											<text style="color: rgb(153, 153, 153);;font-size: 24rpx;">
												{{item.create_time}}
											</text>
										</view>
										<label class="uni-list-cell uni-list-cell-pd">
											<view>
												<radio :value="String(index)" :checked="index == current" />
											</view>
											
										</label>

									</view>
								</radio-group>

							</block>
							</scroll-view>
				
						<view class=" flex-around ">
							<view class="cancel flex" @click="cancel('form')">
								取消
							</view>
							<view class="sumbit-btn flex" @click="modifySuperior('form')">
								确定
							</view>
						</view>
					</view>

				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
                current: 0,
				tabIndex: 4,
				searchVal: '',
				msgType: 'success',
				currentStatus: 'deduction',
				form: {
					// 余额
					balance: '',
					// 积分
					integral: '',
					// 减少
					type: '2',
					id: ''

				},
				// 修改状态 1 是修改资料 2是修改上级
				modifyStatus: 1,
				formUpdate: {

				},
				list: [],
				changeValue: '',
				updata: false,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				userInfo: null,
				superiorId:'',
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				rulesWxForm: {
					balance: {
						rules: [{
							required: true,
							errorMessage: '请输入余额'
						}]
					},
					integral: {
						rules: [{
							required: true,
							errorMessage: '请输入积分'
						}]
					},


				},
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.$at.releaseKey('submit');
			this.$at.releaseKey('submitAll');
			this.mescroll?.resetUpScroll();

		},
		methods: {
             radioChange(e,id){
				 console.log(e,id)
				 this.superiorId=id
				 this.current=e.detail.value
			 },
			deductionFn(type) {
				this.currentStatus = type
			},
			modifySuperiorFn(item) {
			
				this.userInfo = item
				this.form.id = item.id
				this.modifyStatus = 2
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:642rpx;border-radius:10rpx;padding:30rpx;',
					bottomClose: false,
					shadeClose: true,
					topclose: true
				});
			},
			// 操作记录
			userRecordsFn(item) {
				this.$sun.navGo('/pages/userManagement/operationRecords/operationRecords', {
					...item
				})
			},
			modifyFn(item) {
				this.userInfo = item
				this.form.id = item.id
				this.modifyStatus = 1
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:642rpx;border-radius:10rpx;padding:30rpx;',
					bottomClose: false,
					shadeClose: true,
					topclose: true
				});

			},

			changeInput(e) {
				this.searchVal = e.detail.value
				console.log('1111')
				this.mescroll?.resetUpScroll();
			},
			cancel() {
				this.$refs.myPackagePopup.close()
			},
			deleteFn(item) {


				uni.showModal({
					title: '提示',
					content: '是否修改该条数据',
					success: async (res) => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.delUser,
								data: {
									id: item.id,
									status:item.status==1?0:1


								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							if (result.code == 0) {
								this.mescroll?.resetUpScroll();
								this.$sun.toast(result.msg, 'none')
							} else {
								this.$sun.toast(result.msg, 'none')
							}
						} else if (res.cancel) {

						}
					}
				});


			},
			modifySuperior(){
				this.$at.uniDoFunc({
					key: 'submitAll',
					success: async () => {
						this.$at.lockKey('submitAll');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
				
				
						console.log((this.form))
				
						const res = await this.$http.post({
							url: this.$api.setTopUser,
							data: {
				                 id:this.userInfo.id,
								 top_id:this.superiorId
							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}
				
						})
						console.log(res)
						if (res.code == 0) {
							for (const key of Object.keys(this.form)) {
								this.form[key] = '';
							}
				
				
							// 跳转到登录页面
							this.$at.releaseKey('submitAll');
							this.$sun.toast(res.msg, 'none')
				
							setTimeout(() => {
								this.$refs.myPackagePopup.close()
								this.mescroll?.resetUpScroll();
							}, 500)
						} else {
							this.$at.releaseKey('submitAll');
							this.$sun.toast(res.msg, 'none')
						}
				
					}
				});
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.userList,
					data: {
						page: scroll.num,
						limit: 10,

						name: this.searchVal
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);

					console.log('this.list', this.list, this.list.length);
				}
			},
			saveInfo(formName) {

				this.$refs[formName].validate((err, formData) => {
					// 如果校验成功 ，err 返回 null
					if (err) {
						console.log(err, formData)
						return
					} else {

						console.log(this.form)
						// 需要判断输入的金额是否大于现在的金额

						if (this.form.integral > this.userInfo.integral) {
							this.$sun.toast('当前扣除的积分大于现拥有的积分')
							return
						} else if (this.form.balance > this.userInfo.balance) {
							this.$sun.toast('当前扣除的余额大于现拥有的余额')
							return
						} else {
							this.$at.uniDoFunc({
								key: 'submit',
								success: async () => {
									this.$at.lockKey('submit');
									// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择


									console.log((this.form))

									const res = await this.$http.post({
										url: this.$api.setAmount,
										data: {

											...this.form
										},
										headers: {
											'Authorization': `Bearer ${this.token}`
										}

									})
									console.log(res)
									if (res.code == 0) {
										for (const key of Object.keys(this.form)) {
											this.form[key] = '';
										}


										// 跳转到登录页面
										this.$at.releaseKey('submit');
										this.$sun.toast(res.msg, 'none')

										setTimeout(() => {
											this.$refs.myPackagePopup.close()
											this.mescroll?.resetUpScroll();
										}, 500)
									} else {
										this.$at.releaseKey('submit');
										this.$sun.toast(res.msg, 'none')
									}

								}
							});
						}


					}

				}).then(async res => {



				})

			},
			// modifyFn() {
			// 	this.$refs.inputDialog.open()
			// },
			dialogClose() {

			}
		}
	}
</script>

<style lang="less" scoped>
	.viewDetailsTop {
		margin-bottom: 20rpx;
		padding: 10rpx 0;
		background: rgb(255, 255, 255);

		.deduction {
			width: 122rpx;
			height: 56rpx;
			background: rgb(249, 43, 24);
			color: rgb(255, 255, 255);
		}

		.add {
			width: 122rpx;
			height: 56rpx;
			box-sizing: border-box;
			border: 1px solid rgb(249, 43, 24);
			background: rgb(255, 255, 255);
			color: rgb(102, 102, 102);
		}

		.avatar {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
		}
	}

	.modifySuperior {
		height: 50vh;
		overflow: auto;
	}

	.edit {
		.cancel {
			width: 268rpx;
			height: 96rpx;
			box-sizing: border-box;
			border: 1px solid rgb(249, 43, 24);
			background: rgb(255, 255, 255);
			border-radius: 60rpx;
		}

		.modifySuperior {}

		.sumbit-btn {

			width: 268rpx;
			height: 96rpx;
			background: linear-gradient(135.00deg, rgb(250, 44, 25) 0%, rgb(250, 63, 25) 44.593%, rgb(250, 89, 25) 83.407%, rgb(250, 100, 25) 100%);


			height: 100rpx;
			color: #fff;
			border-radius: 60rpx;

			background-color: #1890FF;
		}

		.image {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}

		.inputIphone {

			height: 108rpx;
			padding: 34rpx;
			border-radius: 20rpx;

			background: rgb(246, 246, 246);
		}

		.verificationCode {
			width: 36rpx;
			height: 36rpx;
		}

		.iphones {
			position: relative;

			.verificationCodes {
				z-index: 999;
				position: absolute;
				right: 16rpx;
				top: 23rpx;
				text-align: center;
				width: 170rpx;
				height: 65rpx;
				line-height: 65rpx;
				border-radius: 100rpx;
				font-size: 20rpx;
				border-radius: 20rpx;

				background: rgb(28, 110, 255);
				color: #fff;
			}
		}



	}

	.addEmployee {

		// padding: 45rpx;


		.cancel {
			width: 268rpx;
			height: 96rpx;
			box-sizing: border-box;
			border: 1px solid rgb(249, 43, 24);
			background: rgb(255, 255, 255);
			border-radius: 60rpx;
		}

		.sumbit-btn {

			width: 268rpx;
			height: 96rpx;
			background: linear-gradient(135.00deg, rgb(250, 44, 25) 0%, rgb(250, 63, 25) 44.593%, rgb(250, 89, 25) 83.407%, rgb(250, 100, 25) 100%);


			height: 100rpx;
			color: #fff;
			border-radius: 60rpx;

			background-color: #1890FF;
		}
	}

	.packageCardRecordPage {
		.packageCardList {
			.icon {
				width: 27.64rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			.card {
				padding: 25rpx;

				border-radius: 12rpx;

				background: rgb(245, 245, 245);
			}

			.deleteBtn {
				width: 77px;
				height: 30px;
				box-sizing: content-box;
				border: 1px solid rgb(225, 225, 225);
				border-radius: 10px;
				font-size: 28rpx;
				background: rgb(255, 255, 255);
			}

			.verificationRecordsBtn {
				width: 77px;
				height: 30px;
				box-sizing: content-box;
				border: 1px solid rgb(225, 225, 225);
				border-radius: 10px;
				font-size: 28rpx;
				background: rgb(255, 255, 255);
			}

			.modifyBtn {
				border-radius: 20rpx;
				width: 77px;
				height: 30px;
				color: rgb(255, 255, 255);
				background: rgb(0, 124, 255);
			}

			.image {
				width: 88rpx;
				height: 88rpx;
			}


			padding: 20rpx;
			border-radius: 20rpx;

			background: rgb(255, 255, 255);
		}

		.timeImg {
			width: 40rpx;
			height: 40rpx;
			margin-left: 5rpx;
			margin-right: 15rpx;
		}

		.withdrawalRecordsTop {

			background: rgb(255, 255, 255);

			padding: 34rpx;

			// border-radius: 130rpx;


			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;
				margin-right: 24rpx;
				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;
				width: 100%;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>